<!--<page-header [action]="phActionTpl">-->
<!--&lt;!&ndash;  <ng-template #phActionTpl>&ndash;&gt;-->
<!--&lt;!&ndash;    <button (click)="add()" nz-button nzType="primary">新建</button>&ndash;&gt;-->
<!--&lt;!&ndash;  </ng-template>&ndash;&gt;-->

<!--</page-header>-->
<page-header [title]="'权限分配'"></page-header>

<nz-card [nzBordered]="false">
  <button nz-button (click)="add(modalContent)" [nzType]="'primary'">
    <i nz-icon nzType="plus"></i>
    <span>分配权限</span>
  </button>
  <ng-container *ngIf="selectedRows.length > 0">
    <button nz-button>批量操作</button>
    <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
      更多操作
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #batchMenu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="remove()">删除</li>
        <li nz-menu-item (click)="approval()">批量审批</li>
      </ul>
    </nz-dropdown-menu>
  </ng-container>
  <div class="my-md">
    <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
      <ng-template #message>
        已选择
        <strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{ totalCallNo }}</strong> 万
        <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
      </ng-template>
    </nz-alert>
  </div>
  <st #st [columns]="columns" [data]="data" [loading]="loading" (change)="stChange($event)">
    <ng-template st-row="status" let-i>
      <nz-badge [nzStatus]="i.statusType" [nzText]="i.statusText"></nz-badge>
    </ng-template>
  </st>
</nz-card>
<ng-template #modalContent>
  <nz-card [nzBordered]="false">
    <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="200">
      <se label="用户名称" error="请输入标题" required>
        <input nz-input formControlName="title" readonly placeholder="角色名称" />
      </se>

      <se label="分配权限">
        <nz-select
          [nzMaxTagCount]="3"
          [nzMaxTagPlaceholder]="tagPlaceHolder"
          nzMode="multiple"
          nzPlaceHolder="Please select"
          [(ngModel)]="listOfSelectedValue"
        >
          <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
        </nz-select>
        <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>
      </se>
    </form>
  </nz-card>
</ng-template>
